<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>可视化大屏 - 智慧农业管理系统</title>
    <!-- 引入ECharts图表库 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            background: linear-gradient(135deg, #0a1929 0%, #173a5e 100%);
            color: #fff;
            overflow-x: hidden;
        }

        /* 大屏容器 */
        .dashboard-container {
            padding: 15px;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 头部 */
        .dashboard-header {
            text-align: center;
            margin-bottom: 15px;
            position: relative;
        }

        .dashboard-title {
            font-size: 36px;
            font-weight: 700;
            color: #fff;
            text-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
            letter-spacing: 2px;
            margin-bottom: 5px;
        }

        .dashboard-subtitle {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
            letter-spacing: 1px;
        }

        .dashboard-time {
            position: absolute;
            right: 20px;
            top: 10px;
            font-size: 18px;
            color: rgba(255, 255, 255, 0.9);
        }

        /* 内容区域 */
        .dashboard-content {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: auto 1fr 1fr;
            gap: 15px;
        }

        /* 卡片样式 */
        .dashboard-card {
            background: rgba(15, 35, 60, 0.8);
            border-radius: 10px;
            border: 1px solid rgba(76, 175, 80, 0.2);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            padding: 15px;
            display: flex;
            flex-direction: column;
            position: relative;
            overflow: hidden;
        }

        .dashboard-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.8), transparent);
            animation: scan 3s infinite linear;
        }

        @keyframes scan {
            0% { transform: translateX(-100%); }
            100% { transform: translateX(100%); }
        }

        .card-title {
            font-size: 18px;
            color: #fff;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(76, 175, 80, 0.3);
            position: relative;
        }

        .card-title::after {
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 50px;
            height: 2px;
            background: #4caf50;
        }

        /* 数据概览卡片 */
        .data-overview {
            grid-column: 1 / 4;
            display: grid;
            grid-template-columns: repeat(6, 1fr);
            gap: 15px;
        }

        .data-card {
            background: rgba(15, 35, 60, 0.8);
            border-radius: 10px;
            border: 1px solid rgba(76, 175, 80, 0.2);
            padding: 15px;
            text-align: center;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .data-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(76, 175, 80, 0.3);
            border-color: rgba(76, 175, 80, 0.5);
        }

        .data-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, rgba(76, 175, 80, 0.8), transparent);
            animation: scan 3s infinite linear;
        }

        .data-icon {
            font-size: 24px;
            margin-bottom: 10px;
            color: #4caf50;
        }

        .data-value {
            font-size: 26px;
            font-weight: 700;
            color: #fff;
            margin-bottom: 5px;
        }

        .data-label {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }

        /* 地图容器 */
        .map-container {
            grid-column: 2;
            grid-row: 2 / 4;
        }

        /* 图表容器 */
        .chart-container {
            flex: 1;
            min-height: 200px;
        }

        /* 状态指示器 */
        .status-indicator {
            display: inline-block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            margin-right: 6px;
        }

        .status-normal {
            background-color: #4caf50;
            box-shadow: 0 0 5px #4caf50;
        }

        .status-warning {
            background-color: #ff9800;
            box-shadow: 0 0 5px #ff9800;
        }

        .status-danger {
            background-color: #f44336;
            box-shadow: 0 0 5px #f44336;
        }

        /* 列表样式 */
        .status-list {
            list-style: none;
            margin-top: 10px;
        }

        .status-item {
            display: flex;
            align-items: center;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            font-size: 14px;
        }

        .status-item:last-child {
            border-bottom: none;
        }

        .status-name {
            flex: 1;
            color: rgba(255, 255, 255, 0.8);
        }

        .status-value {
            color: #fff;
            font-weight: 500;
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }

        ::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(76, 175, 80, 0.5);
            border-radius: 3px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: rgba(76, 175, 80, 0.7);
        }

        /* 警告提示 */
        .alert-warning {
            background-color: rgba(255, 152, 0, 0.2);
            border: 1px solid rgba(255, 152, 0, 0.5);
            color: #ffb74d;
            padding: 8px 12px;
            border-radius: 4px;
            font-size: 14px;
            margin-top: 10px;
        }

        /* 跳动动画 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }
    </style>
</head>
<body>
<div class="dashboard-container">
    <!-- 头部 -->
    <div class="dashboard-header">
        <h1 class="dashboard-title">智慧农业可视化大屏</h1>
        <p class="dashboard-subtitle">实时监测 · 数据分析 · 智能决策</p>
        <div class="dashboard-time" id="currentTime"></div>
    </div>

    <!-- 数据概览 -->
    <div class="data-overview dashboard-card">
        <div class="data-card">
            <div class="data-icon">🌡️</div>
            <div class="data-value" id="temperature">26.5°C</div>
            <div class="data-label">平均温度</div>
        </div>
        <div class="data-card">
            <div class="data-icon">💧</div>
            <div class="data-value" id="humidity">68%</div>
            <div class="data-label">平均湿度</div>
        </div>
        <div class="data-card">
            <div class="data-icon">☀️</div>
            <div class="data-value" id="light">8500</div>
            <div class="data-label">光照强度(lux)</div>
        </div>
        <div class="data-card">
            <div class="data-icon">🌱</div>
            <div class="data-value" id="soil">62%</div>
            <div class="data-label">土壤湿度</div>
        </div>
        <div class="data-card">
            <div class="data-icon">⚗️</div>
            <div class="data-value" id="ph">6.8</div>
            <div class="data-label">土壤pH值</div>
        </div>
        <div class="data-card">
            <div class="data-icon">🏭</div>
            <div class="data-value" id="co2">450</div>
            <div class="data-label">CO₂浓度(ppm)</div>
        </div>
    </div>

    <!-- 内容区域 -->
    <div class="dashboard-content">
        <!-- 左侧区域 -->
        <div class="dashboard-card">
            <h3 class="card-title">设备状态</h3>
            <div class="chart-container" id="deviceChart"></div>
            <ul class="status-list">
                <li class="status-item">
                    <span class="status-indicator status-normal"></span>
                    <span class="status-name">传感器A</span>
                    <span class="status-value">正常</span>
                </li>
                <li class="status-item">
                    <span class="status-indicator status-normal"></span>
                    <span class="status-name">传感器B</span>
                    <span class="status-value">正常</span>
                </li>
                <li class="status-item">
                    <span class="status-indicator status-warning"></span>
                    <span class="status-name">控制器C</span>
                    <span class="status-value">警告</span>
                </li>
                <li class="status-item">
                    <span class="status-indicator status-normal"></span>
                    <span class="status-name">灌溉系统</span>
                    <span class="status-value">正常</span>
                </li>
            </ul>
            <div class="alert-warning pulse">
                控制器C电量不足，请及时更换电池
            </div>
        </div>

        <!-- 中间区域 - 地图 -->
        <div class="map-container dashboard-card">
            <h3 class="card-title">设备分布图</h3>
            <div class="chart-container" id="mapChart"></div>
        </div>

        <!-- 右侧区域 -->
        <div class="dashboard-card">
            <h3 class="card-title">作物生长情况</h3>
            <div class="chart-container" id="growthChart"></div>
        </div>

        <!-- 左下区域 -->
        <div class="dashboard-card">
            <h3 class="card-title">环境监测趋势</h3>
            <div class="chart-container" id="trendChart"></div>
        </div>

        <!-- 右下区域 -->
        <div class="dashboard-card">
            <h3 class="card-title">灌溉用水统计</h3>
            <div class="chart-container" id="waterChart"></div>
        </div>
    </div>
</div>

<script>
    // 更新时间
    function updateTime() {
        const now = new Date();
        const year = now.getFullYear();
        const month = String(now.getMonth() + 1).padStart(2, '0');
        const day = String(now.getDate()).padStart(2, '0');
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');

        document.getElementById('currentTime').textContent = 
            `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    }

    // 初始更新时间并设置定时器
    updateTime();
    setInterval(updateTime, 1000);

    // 初始化所有图表
    document.addEventListener('DOMContentLoaded', function() {
        initDeviceChart();
        initMapChart();
        initGrowthChart();
        initTrendChart();
        initWaterChart();

        // 模拟数据更新
        setInterval(updateData, 5000);
    });

    // 设备状态图表
    function initDeviceChart() {
        const chart = echarts.init(document.getElementById('deviceChart'));
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                data: ['正常', '警告', '离线'],
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.7)'
                }
            },
            series: [
                {
                    name: '设备状态',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '16',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: 75, name: '正常', itemStyle: {color: '#4caf50'}},
                        {value: 20, name: '警告', itemStyle: {color: '#ff9800'}},
                        {value: 5, name: '离线', itemStyle: {color: '#f44336'}}
                    ]
                }
            ]
        };
        chart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }

    // 地图图表
    function initMapChart() {
        // 使用散点图替代地图，避免地图组件加载问题
        const chart = echarts.init(document.getElementById('mapChart'));

        // 设备分布数据，仅存在于齐齐哈尔和驻马店附近
        const deviceData = [
            // 驻马店附近设备 - 更分散的位置
            {name: '驻马店-01', value: [114.03, 32.97, 95], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-02', value: [114.33, 33.17, 92], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-03', value: [113.73, 32.77, 88], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-04', value: [114.53, 33.37, 85], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-05', value: [113.63, 32.57, 82], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-06', value: [114.23, 33.07, 80], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-07', value: [113.83, 32.87, 78], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-08', value: [114.43, 33.27, 75], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-09', value: [113.93, 32.67, 73], itemStyle: {color: '#4caf50'}},
            {name: '驻马店-10', value: [114.13, 33.47, 70], itemStyle: {color: '#4caf50'}},

            // 齐齐哈尔附近设备 - 更分散的位置
            {name: '齐齐哈尔-01', value: [123.97, 47.34, 93], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-02', value: [124.37, 47.64, 90], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-03', value: [123.57, 47.04, 87], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-04', value: [124.27, 47.54, 85], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-05', value: [123.67, 47.14, 82], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-06', value: [124.47, 47.84, 80], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-07', value: [123.77, 47.24, 78], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-08', value: [124.17, 47.44, 75], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-09', value: [124.07, 46.94, 73], itemStyle: {color: '#2196f3'}},
            {name: '齐齐哈尔-10', value: [123.87, 47.74, 70], itemStyle: {color: '#2196f3'}}
        ];

        // 创建一个简单的散点图，模拟地图效果
        const option = {
            backgroundColor: 'transparent',
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    return `${params.name}<br/>农田指数: ${params.value[2]}`;
                }
            },
            grid: {
                left: '10%',
                right: '10%',
                top: '10%',
                bottom: '15%'
            },
            xAxis: {
                type: 'value',
                name: '经度',
                nameLocation: 'middle',
                nameGap: 25,
                min: 110,
                max: 132,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            yAxis: {
                type: 'value',
                name: '纬度',
                nameLocation: 'middle',
                nameGap: 40,
                min: 30,
                max: 52,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            dataZoom: [
                {
                    type: 'inside',
                    xAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'inside',
                    yAxisIndex: 0,
                    filterMode: 'none'
                },
                {
                    type: 'slider',
                    xAxisIndex: 0,
                    filterMode: 'none',
                    bottom: 10,
                    height: 10,
                    handleStyle: {
                        color: 'rgba(76, 175, 80, 0.8)'
                    },
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.7)'
                    },
                    borderColor: 'rgba(76, 175, 80, 0.3)'
                },
                {
                    type: 'slider',
                    yAxisIndex: 0,
                    filterMode: 'none',
                    right: 10,
                    width: 10,
                    handleStyle: {
                        color: 'rgba(76, 175, 80, 0.8)'
                    },
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.7)'
                    },
                    borderColor: 'rgba(76, 175, 80, 0.3)'
                }
            ],
            series: [
                {
                    name: '设备分布',
                    type: 'scatter',
                    data: deviceData,
                    symbolSize: function(val) {
                        return val[2] / 3;
                    },
                    label: {
                        show: true,
                        formatter: '{b}',
                        position: 'top',
                        color: 'rgba(255, 255, 255, 0.8)',
                        fontSize: 10
                    },
                    itemStyle: {
                        color: '#4caf50',
                        shadowBlur: 10,
                        shadowColor: 'rgba(76, 175, 80, 0.5)'
                    },
                    emphasis: {
                        itemStyle: {
                            color: '#81c784',
                            shadowBlur: 15,
                            shadowColor: 'rgba(76, 175, 80, 0.8)'
                        }
                    }
                }
            ]
        };

        chart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }

    // 作物生长情况图表
    function initGrowthChart() {
        const chart = echarts.init(document.getElementById('growthChart'));
        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: ['小麦', '玉米', '水稻', '大豆', '蔬菜'],
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            series: [
                {
                    name: '生长指数',
                    type: 'bar',
                    barWidth: '60%',
                    data: [85, 78, 92, 65, 88],
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                            {offset: 0, color: '#4caf50'},
                            {offset: 1, color: '#81c784'}
                        ])
                    },
                    label: {
                        show: true,
                        position: 'right',
                        color: 'rgba(255, 255, 255, 0.8)'
                    }
                }
            ]
        };

        chart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }

    // 环境监测趋势图表
    function initTrendChart() {
        const chart = echarts.init(document.getElementById('trendChart'));

        // 生成24小时的时间点
        const hours = [];
        for (let i = 0; i < 24; i++) {
            hours.push(i + ':00');
        }

        // 生成模拟数据
        const temperatureData = [];
        const humidityData = [];

        for (let i = 0; i < 24; i++) {
            temperatureData.push(20 + Math.random() * 10);
            humidityData.push(60 + Math.random() * 20);
        }

        const option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: hours,
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.2)'
                    }
                },
                axisLabel: {
                    color: 'rgba(255, 255, 255, 0.7)',
                    interval: 3
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                }
            },
            yAxis: [
                {
                    type: 'value',
                    name: '温度(°C)',
                    position: 'left',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.7)'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)'
                        }
                    }
                },
                {
                    type: 'value',
                    name: '湿度(%)',
                    position: 'right',
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.2)'
                        }
                    },
                    axisLabel: {
                        color: 'rgba(255, 255, 255, 0.7)'
                    },
                    splitLine: {
                        show: false
                    }
                }
            ],
            series: [
                {
                    name: '温度',
                    type: 'line',
                    smooth: true,
                    data: temperatureData,
                    itemStyle: {
                        color: '#ff9800'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: 'rgba(255, 152, 0, 0.3)'},
                            {offset: 1, color: 'rgba(255, 152, 0, 0)'}
                        ])
                    }
                },
                {
                    name: '湿度',
                    type: 'line',
                    smooth: true,
                    yAxisIndex: 1,
                    data: humidityData,
                    itemStyle: {
                        color: '#2196f3'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {offset: 0, color: 'rgba(33, 150, 243, 0.3)'},
                            {offset: 1, color: 'rgba(33, 150, 243, 0)'}
                        ])
                    }
                }
            ]
        };

        chart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }

    // 灌溉用水统计图表
    function initWaterChart() {
        const chart = echarts.init(document.getElementById('waterChart'));
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c}m³ ({d}%)'
            },
            legend: {
                orient: 'vertical',
                right: 10,
                top: 'center',
                data: ['A区', 'B区', 'C区', 'D区', 'E区'],
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.7)'
                }
            },
            series: [
                {
                    name: '用水量',
                    type: 'pie',
                    radius: '70%',
                    center: ['40%', '50%'],
                    data: [
                        {value: 335, name: 'A区', itemStyle: {color: '#4caf50'}},
                        {value: 310, name: 'B区', itemStyle: {color: '#2196f3'}},
                        {value: 234, name: 'C区', itemStyle: {color: '#ff9800'}},
                        {value: 135, name: 'D区', itemStyle: {color: '#9c27b0'}},
                        {value: 148, name: 'E区', itemStyle: {color: '#00bcd4'}}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    label: {
                        color: 'rgba(255, 255, 255, 0.8)'
                    },
                    labelLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.3)'
                        }
                    }
                }
            ]
        };

        chart.setOption(option);

        // 响应式调整
        window.addEventListener('resize', function() {
            chart.resize();
        });
    }

    // 更新数据
    function updateData() {
        // 更新数据概览卡片
        document.getElementById('temperature').textContent = (20 + Math.random() * 10).toFixed(1) + '°C';
        document.getElementById('humidity').textContent = (60 + Math.random() * 20).toFixed(0) + '%';
        document.getElementById('light').textContent = (7000 + Math.random() * 2000).toFixed(0);
        document.getElementById('soil').textContent = (55 + Math.random() * 15).toFixed(0) + '%';
        document.getElementById('ph').textContent = (6.5 + Math.random()).toFixed(1);
        document.getElementById('co2').textContent = (400 + Math.random() * 100).toFixed(0);
    }
</script>
</body>
</html>